<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>帮助说明</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="stylesheet" href="static/css/aui.2.0.css">
    <link rel="stylesheet" href="static/css/common.css">
    <link rel="stylesheet" href="static/css/summary.css">
</head>
<body>
<!--<div class="null-status"></div>-->
<!--<header class="aui-bar aui-bar-nav">-->
    <!--<a class="aui-pull-left aui-btn">-->
        <!--<span class="aui-iconfont aui-icon-left"></span>-->
    <!--</a>-->
    <!--<div class="title">帮助说明</div>-->
<!--</header>-->

<div class="help-box">
    <ul class="help-box-listH">
        <li class="li-active"><span>提现问题</span></li>
        <li><span>订单问题</span></li>
        <li><span>返利问题</span></li>
        <li><span>其他问题</span></li>
    </ul>
    <div class="help-box-listC">
        <script type="text/x-handlebars-template" id="help-box-listC">
            <ol class="help-box-list">
                <div class="listC-chagnjian">
                    <span>常见问题</span>
                </div>
                {{#each info}}
                <li class="li-active1">
                    <div class="li1-con">
                        <i></i>
                        <p>{{question_title}}</p>
                        <span></span>
                    </div>
                    <ul class="active-ul">
                        <li>
                            我爱北京天安门我爱北京天安门我爱北京天安门我爱北京天安门我爱北京天安门
                        </li>
                    </ul>
                </li>
                {{/each}}
            </ol>
        </script>
    </div>
</div>

<script src="lib/jquery-3.0.0.min.js"></script>
<script src="static/js/config.js"></script>
<script src="lib/handlebars-v4.0.10.js"></script>
<script>
    var ListTpl = $('#help-box-listC').html();
    var ListCmp = Handlebars.compile(ListTpl);
//    页面首次加载数据
    $.ajax({
        url: C.interface.help,
        type: 'post',
        dataType: 'json',
        data: {
            category: '0'
        },
        success: function (response) {
            if (response.errorCode == '200') {
                var data = response.data;
                console.log(data)
                $('.help-box-listC').html(ListCmp(data));
                //    每个页面的列表
                $('.li-active1').click(function () {
                    $(this).find('.active-ul').toggle()
                });
            } else if (response.errorCode == '0') {
                alert('登录过期，请重新登录');
                //调用function.js中的login方法
                againLogin();
            } else {
                alert(response.errorMsg);
            }
        }
    });

    //    每个页面
    var tab = $('.help-box-listH li');
    var index = tab.index();
//    点击tab就请求对应数据
    tab.on('click', function () {
        var that=$(this);
        var index = that.index();
        $.ajax({
            url: C.interface.help,
            type: 'post',
            dataType: 'json',
            data: {
                category: index
            },
            success: function (response) {
                if (response.errorCode == '200') {
                    var data = response.data;
                    $('.help-box-listC').html(ListCmp(data));
                    that.addClass('li-active').siblings().removeClass('li-active');
                    //    每个页面的列表
                    $('.li-active1').click(function () {
                        $(this).find('.active-ul').toggle()
                    });
                } else if (response.errorCode == '0') {
                    alert('登录过期，请重新登录');
                    //调用function.js中的login方法
                    againLogin();
                } else {
                    alert(response.errorMsg);
                }
            }
        });
    });
</script>
</body>
</html>